<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

// 评论数据：使用扁平化结构存储所有评论和回复
const comments = ref([
  {
    id: 1,
    username: '用户1',
    content: '这是一条页是评论',
    time: '2024-03-20 10:00',
    showReply: false, // 控制回复输入框的显示/隐藏
    replyContent: '', // 临时存储回复输入框中的内容
    parentId: null, // null表示这是顶级评论
  },
  {
    id: 2,
    username: '用户2',
    content: '这是一条回复',
    time: '2024-03-20 10:05',
    showReply: false,
    replyContent: '',
    parentId: 1, // 表示这是对id为1的评论的回复
    replyTo: {
      // 记录回复的对象信息
      id: 1,
      username: '用户1',
    },
  },
  {
    id: 3,
    username: '用户3',
    content: '这是对回复的回复',
    time: '2024-03-20 10:10',
    showReply: false,
    replyContent: '',
    parentId: 1, // 表示这是对id为1的评论的回复
    replyTo: {
      // 记录回复的对象信息
      id: 2,
      username: '用户2',
    },
  },
])

// 新评论的输入内容
const newComment = ref('')

// 计算属性：获取按时间倒序排序的顶级评论列表
const sortedComments = computed(() => {
  return comments.value
    .filter((comment) => comment.parentId === null) // 只获取顶级评论
    .sort((a, b) => new Date(b.time) - new Date(a.time)) // 按时间倒序排序
})

// 获取指定评论的所有回复
const getReplies = (parentId) => {
  return comments.value.filter((comment) => comment.parentId === parentId)
}

// 获取指定评论的按时间倒序排序的回复列表
const getSortedReplies = (parentId) => {
  return getReplies(parentId).sort((a, b) => new Date(b.time) - new Date(a.time))
}

// 显示/隐藏评论的回复输入框
const showReplyInput = (comment) => {
  comment.showReply = !comment.showReply
  comment.replyContent = '' // 清空输入框
}

// 显示/隐藏回复的回复输入框
const showReplyToReplyInput = (reply) => {
  reply.showReply = !reply.showReply
  reply.replyContent = '' // 清空输入框
}

// 提交新评论
const submitComment = () => {
  if (!newComment.value.trim()) {
    ElMessage.warning('请输入页是评论内容')
    return
  }

  const comment = {
    id: Date.now(), // 使用时间戳作为唯一ID
    username: '当前用户',
    content: newComment.value,
    time: new Date().toLocaleString(),
    showReply: false,
    replyContent: '',
    parentId: null, // 新评论都是顶级评论
  }

  comments.value.push(comment)
  newComment.value = '' // 清空输入框
  ElMessage.success('页是评论发表成功')
}

// 提交对评论的回复
const submitReply = (comment) => {
  if (!comment.replyContent.trim()) {
    ElMessage.warning('请输入回复内容')
    return
  }

  const reply = {
    id: Date.now(),
    username: '当前用户',
    content: comment.replyContent,
    time: new Date().toLocaleString(),
    showReply: false,
    replyContent: '',
    parentId: comment.id, // 设置父评论ID
    replyTo: {
      // 记录回复对象信息
      id: comment.id,
      username: comment.username,
    },
  }

  comments.value.push(reply)
  comment.replyContent = '' // 清空输入框
  comment.showReply = false // 隐藏输入框
  ElMessage.success('回复发表成功')
}

// 提交对回复的回复
const submitReplyToReply = (reply) => {
  if (!reply.replyContent.trim()) {
    ElMessage.warning('请输入回复内容')
    return
  }

  const newReply = {
    id: Date.now(),
    username: '当前用户',
    content: reply.replyContent,
    time: new Date().toLocaleString(),
    showReply: false,
    replyContent: '',
    parentId: reply.parentId, // 保持与原始评论的关联
    replyTo: {
      // 记录回复对象信息
      id: reply.id,
      username: reply.username,
    },
  }

  comments.value.push(newReply)
  reply.replyContent = '' // 清空输入框
  reply.showReply = false // 隐藏输入框
  ElMessage.success('回复发表成功')
}
</script>

<template>
  <div class="comment-container">
    <!-- 评论输入区域 -->
    <div class="comment-input">
      <!-- 评论输入框 -->
      <el-input v-model="newComment" type="textarea" :rows="3" placeholder="请输入页是评论内容" />
      <!-- 发表评论按钮 -->
      <el-button type="primary" @click="submitComment" class="submit-btn"> 发表页是评论 </el-button>
    </div>

    <!-- 评论列表区域 -->
    <div class="comment-list">
      <!-- 遍历所有顶级评论（parentId为null的评论） -->
      <div v-for="comment in sortedComments" :key="comment.id" class="comment-item">
        <!-- 评论内容区域 -->
        <div class="comment-content">
          <!-- 评论头部：用户名和时间 -->
          <div class="comment-header">
            <span class="username">{{ comment.username }}</span>
            <span class="time">{{ comment.time }}</span>
          </div>
          <!-- 评论正文 -->
          <div class="comment-text">{{ comment.content }}</div>
          <!-- 评论操作区域 -->
          <div class="comment-actions">
            <el-button type="primary" link @click="showReplyInput(comment)"> 回复 </el-button>
          </div>
        </div>

        <!-- 回复输入框：点击回复按钮时显示 -->
        <div v-if="comment.showReply" class="reply-input">
          <el-input
            v-model="comment.replyContent"
            type="textarea"
            :rows="2"
            placeholder="请输入回复内容"
          />
          <el-button type="primary" @click="submitReply(comment)" size="small">
            发表回复
          </el-button>
        </div>

        <!-- 回复列表区域 -->
        <div v-if="getReplies(comment.id).length" class="reply-list">
          <!-- 遍历该评论的所有回复 -->
          <div v-for="reply in getSortedReplies(comment.id)" :key="reply.id" class="reply-item">
            <!-- 回复内容区域 -->
            <div class="reply-content">
              <!-- 回复头部：用户名和时间 -->
              <div class="reply-header">
                <span class="username">{{ reply.username }}</span>
                <span class="time">{{ reply.time }}</span>
              </div>
              <!-- 回复正文：显示回复对象和内容 -->
              <div class="reply-text">
                <!-- 显示回复的是谁 -->
                <span v-if="reply.replyTo" class="reply-to">
                  回复 {{ reply.replyTo.username }}：
                </span>
                {{ reply.content }}
              </div>
              <!-- 回复操作区域 -->
              <div class="reply-actions">
                <el-button type="primary" link @click="showReplyToReplyInput(reply)">
                  回复
                </el-button>
              </div>
            </div>

            <!-- 回复的回复输入框：点击回复按钮时显示 -->
            <div v-if="reply.showReply" class="reply-to-reply-input">
              <el-input
                v-model="reply.replyContent"
                type="textarea"
                :rows="2"
                placeholder="请输入回复内容"
              />
              <el-button type="primary" @click="submitReplyToReply(reply)" size="small">
                发表回复
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 评论容器样式 */
.comment-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 评论输入区域样式 */
.comment-input {
  margin-bottom: 20px;
}

/* 提交按钮样式 */
.submit-btn {
  margin-top: 10px;
}

/* 评论项样式 */
.comment-item {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}

/* 评论和回复头部样式 */
.comment-header,
.reply-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* 用户名样式 */
.username {
  font-weight: bold;
  color: #333;
}

/* 时间样式 */
.time {
  color: #999;
  font-size: 12px;
}

/* 评论和回复正文样式 */
.comment-text,
.reply-text {
  color: #333;
  line-height: 1.6;
}

/* 回复对象样式 */
.reply-to {
  color: #666;
  font-size: 14px;
}

/* 操作按钮区域样式 */
.comment-actions,
.reply-actions {
  margin-top: 5px;
}

/* 回复输入框样式 */
.reply-input,
.reply-to-reply-input {
  margin: 5px 0;
  padding-left: 20px;
}

/* 回复列表样式 */
.reply-list {
  margin-top: 5px;
  padding-left: 20px;
}

/* 回复项样式：使用左侧边框线表示层级关系 */
.reply-item {
  border-left: 2px solid #eee;
  padding: 10px 0 10px 15px;
  margin-bottom: 5px;
}
</style>
